<template>
  <div class="foot">
    <div class="foot-sub">
      <div class="foot-sub-up">
        <div class="foot-sub-up-center">
          <ul>
            <li>{{$t('home.foot.platformServices')}}</li>
            <li><a href="javascript:;">{{$t('home.foot.services01')}}</a></li>
            <li><a href="javascript:;">{{$t('home.foot.services02')}}</a></li>
            <li><a href="javascript:;">{{$t('home.foot.services03')}}</a></li>
            <li><a href="javascript:;">{{$t('home.foot.services04')}}</a></li>
          </ul>
        </div>
        <div class="foot-sub-up-right">
          <ul>
            <li>{{$t('home.foot.technicalSupport')}}</li>
            <li><a href="javascript:;">{{$t('home.foot.support01')}}</a></li>
          </ul>
        </div>
        <div class="foot-sub-up-other">
          <a href="javascript:;" :title="this.$t('home.foot.QrCodeTitle01')" class="number" @mouseover="numberShow()" @mouseout="numberDisappear()">
            <img src="../../../assets/images/common/weixin.png" width="42px" alt="">
            <div class="foot-sub-up-other-QR-code">
              <img src="../../../assets/images/common/weixinCode.png" alt="" width="100px" class="code">
            </div>
          </a>
          <a href="javascript:;" :title="this.$t('home.foot.QrCodeTitle02')" class="number" @mouseover="numberShow()" @mouseout="numberDisappear()">
            <img src="../../../assets/images/common/douyin.png" width="40px" alt="">
            <div class="foot-sub-up-other-QR-code">
              <img src="../../../assets/images/common/douyinCode.png" alt="" width="100px" class="code">
            </div>
          </a>
          <a href="javascript:;" :title="this.$t('home.foot.QrCodeTitle03')" class="number" @mouseover="numberShow()" @mouseout="numberDisappear()">
            <img src="../../../assets/images/common/weibo.png" width="37px" alt="">
            <div class="foot-sub-up-other-QR-code">
              <img src="../../../assets/images/common/weiboCode.png" alt="" width="100px" class="code">
            </div>
          </a>

        </div>
      </div>
      <div class="foot-sub-low">
        <a href="javascript:;"
           style="
           display: inline-block;
           color: #636363;
           width: 200px;
           height: 20px;
           margin: 0 auto;
           line-height: 20px;
           font-size: 12px;
           text-align: center;
           line-height: 20px;"
        >© 2022 StudiousTiger</a>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Foot",
        methods:{
            numberShow:function(){
                let qrCode = document.getElementsByClassName("foot-sub-up-other-QR-code")
                let now =event.currentTarget
                for(let i=0;i<qrCode.length;i++){
                    if(now.contains(qrCode[i])){
                        qrCode[i].style.display="block"
                    }
                }
            },
            numberDisappear:function () {
                let qrCode = document.getElementsByClassName("foot-sub-up-other-QR-code")
                let now =event.currentTarget
                for(let i=0;i<qrCode.length;i++){
                    if(now.contains(qrCode[i])){
                        qrCode[i].style.display="none"
                    }
                }
            },
        }
    }
</script>

<style scoped>
  .foot{
    height: 300px;
    /*z-index: 999;*/
    background-color: #FFFFFF;
    letter-spacing: 1px;
  }
  .foot-sub{
    width: 1150px;
    margin: 0 auto;
  }
  .foot-sub-up{
    width: 1150px;
    height: 220px;
    margin: 0 auto;
  }
  .foot-sub-up-left,.foot-sub-up-center,.foot-sub-up-right,.foot-sub-up-other{
    float: left;
    width: 270px;
    height: 180px;
    margin-left: 20px;
    margin-top: 20px;

  }
  .foot-sub-up-left{
    margin-left: 0px;
  }
  .foot-sub-up div ul li {
    margin-left: -30px;
    margin-top: 15px;
    font-size: 14px;
  }
  .foot-sub-up div ul li a{
    color: rgb(134, 134, 134);
  }
  .foot-sub-up div ul li a:hover{
    color: rgb(53, 53, 53);
  }
  .foot-sub-up div ul li:first-child{
    font-size: 16px;
    color: rgb(27, 27, 27);
  }

  .foot-sub-up-other-QR-code{
    width: 120px;
    height: 120px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgb(184, 184, 184);
    margin-top: 10px;
    margin-left: 5px;
    display: none;
    position: absolute;
  }
  .foot-sub-up-other-QR-code .code{
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .foot-sub-low{
    width: 800px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: rgb(71, 71, 71);
    font-size: 14px;
    border-top: rgb(223, 223, 223) 1px solid;  /* 勿删 */
    /*background-color: #66b2aa;*/
  }
</style>
